<template>
  <div class="memberList">
    <el-card>
      <Form ref="Form" :config="form_configs" :formData="form"> </Form>
      <Table ref="table" :table_config="table_config">
        <template #image="{ data }">
          <img :src="data.user_pic" alt="头像" style="width: 100%; height: 100%" />
        </template>
        <template #switch="{ data }">
          <el-switch style="display: block" v-model="data.is_able" active-color="#13ce66" inactive-color="#ff4949"
            active-text="启用" inactive-text="禁用" @change="(e)=>{ ChangeEnable(e,data.id) }">
          </el-switch>
        </template>
        <template #operation="{ data }">
          <el-button type="primary" size="small" @click="editAdmin(data)">编辑</el-button>
          <el-button size="small" @click="deleteMember(data.id)">删除</el-button>
        </template>
      </Table>
    </el-card>

    <!-- 编辑 -->
    <Dialog :adminInfo="adminInfo" @success="isOk" @close="e => (adminInfo.isEdit = e)" />
  </div>
</template>

<script>
import Form from '@/components/Form/form'
import Table from '@/components/TableData/table'
import Dialog from './components/Dialog.vue'
import { updateAdminAPI, addAdminAPI, deleteAdminAPI,EnableAdmin } from '@/api/user'
export default {
  name: 'MenberList',
  components: { Form, Table, Dialog },
  data() {
    return {
      // 表单数据
      form: {
        keyWord: '',
        searchValue: ''
      },
      // 表单配置
      form_configs: {
        form_config: { inline: true },
        form_item_config: [
        ],
        form_handler: [
          {
            label: '添加用户',
            type: 'success',
            key: 'add',
            handler: () => this.add()
          }
        ]
      },
      // 表格配置
      table_config: {
        table_headers: [
          { label: 'ID', prop: 'id', width: '60' },
          { label: '图片', type: 'slot', slotName: 'image', width: '100' },
          { label: '昵称', prop: 'nickname', width: '100' },
          { label: '账号', prop: 'username', width: '110' },
          { label: '电话', prop: 'mobile', width: '110' },
          { label: '角色', prop: 'name', width: '110' },
          {
            label: '权限',
            prop: 'desc',
            type: 'function',
            width:'240',
            callback: row => {
              return row.desc.join(',')
            }
          },
          {
            label: '是否启用',
            prop: 'is_able',
            type: 'slot',
            slotName: 'switch',
            width: '160',
            // callback: row => {
            //   return row.is_able === 1 ? true : false
            // }
          },
          { label: '注册时间', prop: 'create_time', width: '160' },
          { label: '备注', prop: 'remarks', width: '110' },
          { label: '操作', type: 'slot', slotName: 'operation', width: '200' }
        ],
        axios_config: {
          url: '/admin/list',
          method: 'POST'
        },
        requestData: {
          pageNumber: 1,
          pageSize: 10
        },
        checkedColumn: true,
        pagination: true
      },
      adminInfo: {
        isEdit: false
      }
    }
  },
  methods: {
    // 查询
    queryCar() {
      let { keyWord, searchValue } = this.form
      // 可能需要提交的数据
      let params = {
        pageNumber: 1,
        pageSize: 10
      }
      if (keyWord !== '') {
        params[keyWord] = searchValue
      }
      // 调用获取数据的方法并传递参数
      this.$refs.table.getTableDataWithParams(params)
    },
    // 重置
    reset() {
      this.$refs.Form.$refs.form.resetFields()
      this.queryCar()
    },
    // 删除
    deleteMember(id) {
      this.$confirm('是否删除该会员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteAdminAPI(Number(id))
        this.$message.success(res.message)
        this.$refs.table.getTableData()
      })
    },
    // 编辑信息
    editAdmin(data) {
      this.adminInfo = { ...data, isEdit: true, name: data.roleId, title: '编辑信息', isAdminList: true }
      this.isEdit = true
    },
    // 编辑成功按钮
    async isOk(newValue) {
      console.log(newValue)
      for(let key of newValue.entries()){
        if(key[0] != "file" ){
          this.adminInfo[key[0]] = key[1]
        }
      }
      const param = {
        nickname: newValue.get('nickname'),
        username: newValue.get('username'),
        name: newValue.get('name'),
        is_able: Number(JSON.parse(newValue.get('is_able'))),
        roleId: newValue.get('name'),
        mobile: newValue.get('mobile'),
        // user_pic:newVal.get('user_pic')
      }
      if (this.adminInfo.isAdd) {
        param['password'] = newValue.get('password')
        let upFromData = new FormData()
        for (const pkey in  param) {
          upFromData.set(pkey,param[pkey])
        }
        if(newValue.get('file')) upFromData.set('file',newValue.get('file'))
        const res = await addAdminAPI(upFromData)
        this.adminInfo.isEdit = false
        this.$message.success(res.message)
      } else {
        param['id'] = newValue.get('id')
        // console.log(param)
        let upFromData = new FormData()
        for (const pkey in  param) {
          upFromData.set(pkey,param[pkey])
        }
        if(newValue.get('file')) upFromData.set('file',newValue.get('file'))
        const res = await updateAdminAPI(upFromData)
        this.adminInfo.isEdit = false
        this.$message.success(res.message)
      }
      this.queryCar()
    },
    // 添加用户按钮
    add() {
      this.adminInfo = {
        isEdit: true,
        title: '添加用户',
        isAdd: true,
        nickname: '',
        user_pic: '',
        username: '',
        password: '',
        mobile: '',
        name: 2,
        is_able: 1
      }
      this.isEdit = true
    },
    ChangeEnable(e,id){
      // console.log(e,id)
      EnableAdmin(id).then((res)=>{
        // console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        });
        this.queryCar()
      }).catch((err)=>{
        this.queryCar()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.memberList {
  padding: 20px;
}
</style>
